/**
 * 使用说明
   import styleMixin from "@/mixins/style.js"
   export default{
     mixins:[styleMixin]
   }
 * 
 */
import { px2rpx,removeProperty } from './tools.js'
const mixins = {
  data() {
    return {
      platform: '',
      styleStr: "",
    };
  },
  props: {
    padding: {
      type: [String, Number],
      default: "",
    },
    margin: {
      type: [String, Number],
      default: "",
    },
    color: {
      type: String,
      default: '',
    },
    fontSize: {
      type: [String, Number],
      default: "",
    },
    bgColor: {
      type: String,
      default: '',
    },
    boxShadow: {
      type: String,
      default: '',
    },
    radius: {
      type: [String, Number],
      default: "",
    },
    border: {
      type: String,
      default: '',
    },
    width: {
      type: [String, Number],
      default: '',
    },
    height: {
      type: [String, Number],
      default: '',
    },
    minWidth: {
      type: [String, Number],
      default: '',
    },
    minHeight: {
      type: [String, Number],
      default: '',
    },
    overflow: {
      type: String,
      default: '',
    },
    display: {
      type: String,
      default: '',
    },
    flex: {
      type: [String, Number],
      default: '',
    },
    position: {
      type: String,
      default: '',
    },
    zIndex: {
      type: [String, Number],
      default: '',
    },
    top: {
      type: [String, Number],
      default: '',
    },
    bottom: {
      type: [String, Number],
      default: '',
    },
    left: {
      type: [String, Number],
      default: '',
    },
    right: {
      type: [String, Number],
      default: '',
    },
  },
  computed: {},
  created() { },
  mounted() {
    let style = {};
    const unit = 'px'; // 单位
    const padding = this.padding.split(" ").filter(x => x);
    const margin = this.margin.split(" ").filter(x => x);
    const radius = this.radius.split(" ").filter(x => x);
    style = {
      padding: `padding:${padding.map(n => px2rpx(`${n}${unit}`)).join(' ')}`,
      margin: `margin:${margin.map(n => px2rpx(`${n}${unit}`)).join(' ')}`,
      borderRadius: `border-radius:${radius.map(n => px2rpx(`${n}${unit}`)).join(' ')}`,
      background: this.bgColor ? `background:${this.bgColor}` : '',
      fontSize: this.fontSize ? 'font-size:' + px2rpx(`${this.fontSize}${unit}`) : '',
      color: this.color ? `color:${this.color}` : '',
      boxShadow: this.boxShadow ? `box-shadow:${this.boxShadow}` : '',
      overflow: this.overflow ? `overflow:${this.overflow}` : '',
      flex: this.flex ? `flex:${this.flex}` : '',
      display: this.display ? `display:${this.display}` : '',
      position: this.position ? `position:${this.position}` : '',
      top: this.top ? 'top:' + px2rpx(`${this.top}${unit}`) : '',
      bottom: this.bottom ? 'bottom:' + px2rpx(`${this.bottom}${unit}`) : '',
      right: this.right ? 'right:' + px2rpx(`${this.right}${unit}`) : '',
      left: this.left ? 'left:' + px2rpx(`${this.left}${unit}`) : '',
      border: this.border ? 'border:' + `${this.border}` : '',
      zIndex: this.zIndex ? 'z-index:' + `${this.zIndex}` : '',
      width: this.width ? 'width:' + px2rpx(`${this.width}${unit}`) : '',
      height: this.height ? 'height:' + px2rpx(`${this.height}${unit}`) : '',
      minWidth: this.mWidth ? 'minWidth:' + px2rpx(`${this.mWidth}${unit}`) : '',
      minHeight: this.mHeight ? 'minHeight:' + px2rpx(`${this.mHeight}${unit}`) : '',
    }
    let newArr = [];
    for (let key in removeProperty(style)) {
      console.log(style[key]) // foo, bar
      newArr.push(style[key])
    }
    this.styleStr = `${newArr.join(';')};`;
    console.log('this.styleStr===>', this.styleStr)
  },
  methods: {},
};

export default mixins